<template>
	<view class="to-index">
		<image src="../../static/index/to_index.png" class="img" @click="handle(['fade', 'slide-right'])"></image>
		<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show"><text class="text" @click="toIndex">回到首页</text></uni-transition>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				modeClass: 'fade',
				styles: {}
			}
		},
		methods:{
			handle(type) {
				this.show = !this.show
				this.modeClass = type
			},
			toIndex() {
				uni.navigateTo({
				    url: "/pages/index/index"
				});
			}
		}
	}
</script>

<style lang="scss">
	.to-index {
		position: fixed;
		bottom: 30vh;
		right: 5vw;
	}
	.img {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}
	.text {
		position: absolute;
		top: -50rpx;
		left: -120rpx;
	}
</style>
